<template>
  <el-dialog
    v-if="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :lock-scroll="false"
    :visible.sync="dialogVisible"
    append-to-body
    title="授权"
    width="40%"
    @close="handleClose"
  >
    <el-checkbox-group v-model="form.clientIdList">
      <el-collapse accordion>
        <el-collapse-item v-for="client in clientList" :key="client.id" disabled>
          <template slot="title">
            <el-checkbox :key="'checkbox-' + client.id" :label="client.id" name="clientIdList">
              <img :src="client.logo" alt="" width="30">
              <span>{{ client.name }}</span>
            </el-checkbox>
          </template>
        </el-collapse-item>
      </el-collapse>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { getAll } from '@/api/client'
import { change, getClientIdList } from '@/api/role/roleAllow'

export default {
  name: 'RoleAllow',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      form: {
        clientIdList: []
      },
      clientList: []
    }
  },
  created() {
    this.getClientList()
  },
  methods: {
    getClientList() {
      getClientIdList({ roleId: this.id }).then((res) => {
        this.form.clientIdList = res.data
      })
      getAll().then((res) => {
        this.clientList = res.data
      })
    },
    handleSubmit() {
      if (this.form.clientIdList.length <= 0) {
        this.$message.warning('至少选择一个应用')
        return
      }
      change(this.id, this.form.clientIdList).then((res) => {
        this.$message.success('修改成功')
        this.handleClose()
      })
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-checkbox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .el-checkbox__label {
    display: flex;
    align-items: center;

    span {
      margin-left: 10px;
    }
  }
}

</style>
